<template>
  <div class="flow-container">
    <div class="containers">
      <PropertyPanel v-if="bpmnModeler" :modeler="bpmnModeler" />
      <div id="canvas" class="canvas" />
      <el-button-group>
        <el-button type="primary" size="mini" @click="handleUndo">后退</el-button>
        <el-button type="success" size="mini" @click="handleRedo">前进</el-button>
        <el-button type="warning" size="mini" @click="handleDownload">下载</el-button>
        <el-button type="warning" size="mini" @click="handleSave">保存</el-button>
      </el-button-group>
    </div>
  </div>
</template>
<script>
import Modeler from 'bpmn-js/lib/Modeler'
import { xmlStr } from './xmlData'
import CustomTranslate from './resources/customTranslate/customTranslate'
// import 'diagram-js-minimap/assets/diagram-js-minimap.css'
// import minimapModule from 'diagram-js-minimap'
// import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css' // 右边工具栏样式
// import propertiesPanelModule from 'bpmn-js-properties-panel'
import propertiesProviderModule from 'bpmn-js-properties-panel-activiti/lib/provider/activiti'
import camundaModdleDescriptor from 'activiti-bpmn-moddle/resources/activiti'
import { saveOrUpdate, get } from '@/api/activiti/definition'
import PropertyPanel from './PropertyPanel'

export default {
  components: {
    PropertyPanel
  },
  props: {
    value: {
      type: Object,
      default: () => Object.create({})
    }
  },
  data() {
    return {
      bpmnModeler: null
    }
  },
  async mounted() {
    const customTranslateModule = { translate: ['value', CustomTranslate] }
    this.bpmnModeler = new Modeler({
      container: '#canvas',
      propertiesPanel: {
        parent: '#js-properties-panel'
      },
      additionalModules: [propertiesProviderModule, customTranslateModule],
      moddleExtensions: {
        // 如果要在属性面板中维护camunda：XXX属性，则需要此
        activiti: camundaModdleDescriptor
      }
    })

    await this.bpmnModeler.importXML(xmlStr)
  },
  created() {
    if (this.value.id) {
      this.get(this.value.deploymentId)
    }
  },
  methods: {
    // 后退
    handleUndo() {
      this.bpmnModeler.get('commandStack').undo()
    },
    // 前进
    handleRedo() {
      this.bpmnModeler.get('commandStack').redo()
    },
    // 保存
    handleSave() {
      this.$nextTick(() => {
        this.bpmnModeler.saveXML({ format: true }, function(err, xml) {
          if (err) {
            self.$message({
              type: 'error',
              message: '保存失败，请重试!'
            })
            return console.error('保存失败，请重试', err)
          }
          // 创建新的
          saveOrUpdate({ 'stringBPMN': xml }).then(() => {
            parent.setIsShow(false)
          }).catch(() => {})
        })
      })
    },
    handleDownload() {
      this.bpmnModeler.saveXML({ format: true }, (data) => {
        const dataTrack = 'bpmn'
        const a = document.createElement('a')
        const name = `diagram.${dataTrack}`
        a.setAttribute(
          'href',
          `data:application/bpmn20-xmlcharset=UTF-8,${encodeURIComponent(data)}`
        )
        a.setAttribute('target', '_blank')
        a.setAttribute('dataTrack', `diagram:download-${dataTrack}`)
        a.setAttribute('download', name)
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
      })
    },
    async get(id) {
      const res = await get(id)
      this.bpmnModeler.importXML(res.stringBPMN)
    }
  }
}
</script>
<style lang="less" scoped>
/*左边工具栏以及编辑节点的样式*/
@import "~bpmn-js/dist/assets/diagram-js.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
.flow-container {
  display: flex;
}
/*右边工具栏样式*/
@import "~bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css";
.containers {
  position: absolute;
  background-color: #ffffff;
  width: 95%;
  height: 80%;
}
.canvas {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
      90deg
    ),
    linear-gradient(rgba(235, 235, 235, 1) 5%, rgba(0, 0, 0, 0) 5%);
  background-size: 1rem 1rem;
}
.panel {
  position: absolute;
  right: 0;
  top: 0;
  width: 320px;
  height: 100%;
  overflow-y: scroll;
  text-align: left !important;
  font-size: 15px !important;
}

</style>
